<template>
    <div>
        <div class="flex jus-center mt-25 pr-60">
            <div class="flexSB colorFFF" style="width: 400px;background-color: #151225;text-align: center;padding: 3px;border-radius: 50px;border:1px solid #24203C">
                <div :class="{ 'selectType': selectType == item.type }" :key="index" @click="chooseStatus(item.type)" class="color-fff hand" style="width: 100px; padding: 8px" v-for="(item, index) in typeList">
                    <span>{{ item.title }}</span>
                </div>
            </div>
        </div>
        <div class="mt-20">
            <short :keyword="keyword" ref="short" v-show="selectType=='short'"></short>
            <long :keyword="keyword" ref="long" v-show="selectType=='long'"></long>
            <user :keyword="keyword" ref="user" v-show="selectType=='user'"></user>
            <live :keyword="keyword" ref="live" v-show="selectType=='live'"></live>
        </div>
    </div>
</template>

<script>
import long from './components/long.vue'
import short from './components/short.vue'
import user from './components/user.vue'
import live from './components/live.vue'

export default {
    components: {
        long,
        short,
        user,
        live,
    },
    data() {
        return {
            typeList: [
                {
                    title: '短视频',
                    type: 'short',
                },
                {
                    title: '长视频',
                    type: 'long',
                },
                {
                    title: '用户',
                    type: 'user',
                },
                {
                    title: '直播',
                    type: 'live',
                },
            ],
            selectType: 'short',
        }
    },
    computed: {
        keyword() {
            return decodeURIComponent(this.$route.params.keyword)
        },
    },
    watch: {
        keyword(value) {
            if (value) {
                this.$refs.short.reset(value)
                this.$refs.long.reset(value)
                this.$refs.user.reset(value)
                this.$refs.live.reset(value)
            }
        },
    },
    methods: {
        chooseStatus(index) {
            this.selectType = index
        },
        UrlDecode(str) {
            var ret = ''
            for (var i = 0; i < str.length; i++) {
                var chr = str.charAt(i)
                if (chr == '+') {
                    ret += ' '
                } else if (chr == '%') {
                    var asc = str.substring(i + 1, i + 3)
                    if (parseInt('0x' + asc) > 0x7f) {
                        ret += asc2str(parseInt('0x' + asc + str.substring(i + 4, i + 6)))
                        i += 5
                    } else {
                        ret += asc2str(parseInt('0x' + asc))
                        i += 2
                    }
                } else {
                    ret += chr
                }
            }
            return ret
        },
    },
}
</script>

<style lang="scss" scoped>
.selectType {
    border-radius: 50px;
    background-color: #272337;
}
</style>